<script setup>
import { reactive, ref, onMounted } from 'vue'
import { useRouter, useRoute } from 'vue-router'
import CaseNotes from '../views/case_notes/CaseNotes.vue'
const router = useRouter()
const route = useRoute()
const urlProps = defineProps({
    imgUrl: {}
})

const imgUrl = reactive(urlProps.imgUrl)

const toCaseNotes = () => {
    router.push({ path: '/caseNotes', component: CaseNotes })
}
</script>

<template>
    <div class="main">
        <div class="left">
            <div class="color"></div>
            <div class="mian_title">肺癌诊断系统</div>
            <div class="main_text">
                这是一个肺癌诊断系统的主页面，您可以查看历史记录、上传病情图片和查看个人信息。
            </div>
            <div
                class="fun"
                style="margin-top: 20px; margin-left: 40px"
                v-if="imgUrl.type == 1"
            >
                <el-button color="#0000ff" round>查看历史记录</el-button>
                <el-button round>上传图片</el-button>
            </div>
            <div class="fun" style="margin-top: 20px; margin-left: 40px" v-else>
                <el-button color="#0000ff" round @click="toCaseNotes"
                    >查看病例记录</el-button
                >
            </div>
        </div>
        <div class="right">
            <div class="img_1" :style="imgUrl.style1"></div>
            <div class="img_2" :style="imgUrl.style2"></div>
            <div class="img_3" :style="imgUrl.style3"></div>
        </div>
    </div>
</template>

<style scoped>
/* 实现图片淡入 */
@keyframes pictureIn {
    0% {
        opacity: 0;
    }
    50% {
        opacity: 0.5;
    }
    100% {
        opacity: 1;
    }
}

/* 中间左侧 */
.main {
    display: flex;
}
.left {
    margin-left: 30px;
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: center;
    width: 52%;
}

.color {
    position: absolute;
    left: -20px;
    top: 200px;
    width: 750.62px;
    height: 253.66px;
    opacity: 1;
    transform: rotate(37.57deg);
    background: linear-gradient(
        90deg,
        rgba(240, 0, 240, 0.15) 0%,
        rgba(0, 128, 255, 0.15) 45.84%,
        rgba(21, 0, 255, 0.15) 100%
    );
    filter: blur(100px);
}

.mian_title {
    font-size: 50px;
    font-weight: 700;
    margin-bottom: 20px;
    margin-left: 40px;
}

.main_text {
    width: 520px;
    font-size: 17px;
    line-height: 30px;
    margin-left: 40px;
}

.right {
    width: 48%;
    position: relative;
}
.img_1 {
    position: absolute;
    animation: pictureIn 1.3s linear;
    left: -20px;
    top: 12px;
    width: 320px;
    height: 320px;
    opacity: 1;
    border-radius: 16px;
    border: 12px solid rgba(255, 255, 255, 1);
    box-shadow: 20px 25px 39px rgba(24, 49, 84, 0.14);
}
.img_2 {
    margin-left: 50px;
    margin-top: 80px;
    left: 80px;
    top: 40px;
    width: 520px;
    height: 600px;
    opacity: 1;
    border-radius: 32px;
}
.img_3 {
    animation: pictureIn 1.5s ease-in-out;
    position: absolute;
    left: 286px;
    top: 387px;
    width: 365px;
    height: 200px;
    opacity: 1;
    border-radius: 16px;

    border: 12px solid rgba(255, 255, 255, 1);
    box-shadow: 20px 25px 39px rgba(24, 49, 84, 0.14);
}
</style>
